<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import EchartsCompoBar from "../components/EchartsCompoBar.vue";
const chartCategory = ref([]);
const chartValue = ref([]);
// 第一产业
const chartValue1st = ref([]);
// 第二产业
const chartValue2nd = ref([]);
// 第三产业
const chartValue3rd = ref([]);
// 人均GDP
const chartValuePer = ref([]);
onMounted(() => {
  axios.get("http://localhost:8888/chinagdp").then((res) => {
    console.log("chinagdp", res);
    let category = [],
      value = [],
      value1st = [],
      value2nd = [],
      value3rd = [],
      valueper = [];
    res.data.forEach((element) => {
      category.push(element.year);
      value.push(element.GDP);
      value1st.push(element.primary_industry);
      value2nd.push(element.second_industry);
      value3rd.push(element.third_industry);
      valueper.push(element.per_capita_gdp);
    });
    chartCategory.value = category;
    chartValue.value = value;
    chartValue1st.value = value1st;
    chartValue2nd.value = value2nd;
    chartValue3rd.value = value3rd;
    chartValuePer.value = valueper;
  });
});
</script>

<template>
  <div class="barlinecon">
    <div class="viewitem">
      <EchartsCompoBar
        :key="chartValue"
        chartTitle="中国10年GDP折线图"
        chartType="line"
        categoryOn="X"
        categoryName="年份"
        valueName="亿元"
        :chartCategory="chartCategory"
        :chartValue="chartValue"
      ></EchartsCompoBar>
    </div>
    <div class="viewitem">
      <EchartsCompoBar
        :key="chartValue"
        chartTitle="中国10年GDP柱状图"
        chartType="bar"
        categoryOn="Y"
        categoryName="年份"
        valueName="亿元"
        :chartCategory="chartCategory"
        :chartValue="chartValue"
      ></EchartsCompoBar>
    </div>
    <div class="viewitem">
      <EchartsCompoBar
        :key="chartValuePer"
        chartTitle="中国10年人均GDP折线图"
        chartType="line"
        categoryOn="X"
        categoryName="年份"
        valueName="元"
        :chartCategory="chartCategory"
        :chartValue="chartValuePer"
      ></EchartsCompoBar>
    </div>
    <div class="viewitem">
      <EchartsCompoBar
        :key="chartValuePer"
        chartTitle="中国10年人均GDP柱状图"
        chartType="bar"
        categoryOn="X"
        categoryName="年份"
        valueName="元"
        :chartCategory="chartCategory"
        :chartValue="chartValuePer"
      ></EchartsCompoBar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.barlinecon {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  //   position: relative;
  //   left: 0;
  //   top: 0;
  display: flex;
  flex-wrap: wrap;
  .viewitem {
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    overflow: hidden;
    border: 1px solid grey;
  }
}
</style>
